<!--  -->
<template>
  <div class="infinite-scroll-demo">
    <h2>数据加载无限滚动示例</h2>

    <!-- 控制面板 -->
    <div class="control-panel">
      <el-button type="primary" @click="resetData">重置数据</el-button>
      <el-button @click="clearData">清空数据</el-button>
      <div class="status-info">
        <span>总数据: {{ total }}</span>
        <span>已加载: {{ tableData.length }}</span>
        <span>加载状态: {{ loading ? '加载中...' : '空闲' }}</span>
      </div>
    </div>

    <!-- 表格区域 -->
    <div class="table-container" v-loading="loading">
      <el-table
        v-el-table-infinite-scroll="loadMore"
        :data="tableData"
        :height="500"
        border
        style="width: 100%">
        <el-table-column
          type="index"
          label="序号"
          width="80">
        </el-table-column>
        <el-table-column
          prop="date"
          label="日期"
          width="180">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="120">
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址">
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态"
          width="100">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status === '在线' ? 'success' : 'info'">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>

      <!-- 底部加载提示 -->
      <div class="load-more" v-if="tableData.length > 0">
        <span v-if="loading">加载中...</span>
        <span v-else-if="noMore">没有更多数据了</span>
        <span v-else>向下滚动加载更多</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'InfiniteScrollDemo',
  
  data() {
    return {
      tableData: [],
      loading: false,
      page: 1,
      pageSize: 20,
      total: 100,
      noMore: false
    };
  },

  created() {
    this.loadInitialData();
  },

  methods: {
    // 生成模拟数据
    generateMockData(start, count) {
      const data = [];
      const status = ['在线', '离线'];
      for (let i = start; i < start + count; i++) {
        data.push({
          date: this.formatDate(new Date(Date.now() - i * 24 * 60 * 60 * 1000)),
          name: `用户${i}`,
          address: `测试地址${i}号，测试街道，测试城市`,
          status: status[Math.floor(Math.random() * status.length)]
        });
      }
      return data;
    },

    // 格式化日期
    formatDate(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    },

    // 加载初始数据
    async loadInitialData() {
      this.loading = true;
      try {
        await this.simulateRequest();
        this.tableData = this.generateMockData(0, this.pageSize);
      } catch (error) {
        console.error('加载数据失败:', error);
        this.$message.error('加载数据失败');
      } finally {
        this.loading = false;
      }
    },

    // 加载更多数据
    async loadMore() {
      if (this.loading || this.noMore) return;
      
      this.loading = true;
      try {
        await this.simulateRequest();
        const start = this.tableData.length;
        const remainingCount = this.total - start;
        const count = Math.min(this.pageSize, remainingCount);
        
        if (count <= 0) {
          this.noMore = true;
          return;
        }

        const newData = this.generateMockData(start, count);
        this.tableData = [...this.tableData, ...newData];
        
        if (this.tableData.length >= this.total) {
          this.noMore = true;
        }
      } catch (error) {
        console.error('加载更多数据失败:', error);
        this.$message.error('加载更多数据失败');
      } finally {
        this.loading = false;
      }
    },

    // 模拟请求延迟
    simulateRequest() {
      return new Promise(resolve => setTimeout(resolve, 800));
    },

    // 重置数据
    resetData() {
      this.tableData = [];
      this.page = 1;
      this.noMore = false;
      this.loadInitialData();
    },

    // 清空数据
    clearData() {
      this.tableData = [];
      this.page = 1;
      this.noMore = false;
    }
  }
};
</script>

<style scoped>
.infinite-scroll-demo {
  padding: 20px;
}

h2 {
  color: #2c3e50;
  border-bottom: 2px solid #1976d2;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

.control-panel {
  margin-bottom: 20px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 15px;
}

.status-info {
  margin-left: auto;
  display: flex;
  gap: 20px;
}

.status-info span {
  color: #666;
}

.table-container {
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.load-more {
  text-align: center;
  padding: 10px;
  color: #909399;
  font-size: 14px;
  background: #f8f9fa;
  border-top: 1px solid #ebeef5;
}

/* 自定义 el-table 样式 */
:deep(.el-table) {
  border-radius: 4px 4px 0 0;
}

:deep(.el-table th) {
  background-color: #f5f7fa;
}

:deep(.el-table--border) {
  border-radius: 4px;
}

/* 响应式调整 */
@media screen and (max-width: 768px) {
  .control-panel {
    flex-direction: column;
    align-items: stretch;
  }

  .status-info {
    margin: 10px 0;
    justify-content: space-between;
  }
}
</style>